<script setup lang="ts">
import { KeyValuePair } from '../../types/KeyValuePair';
import { Delete } from "@element-plus/icons-vue";

const model = defineModel<KeyValuePair[]>({ required: true });
const props = defineProps<{ showHeader?: boolean }>();
const { showHeader = true } = props;

const deleteRow = (index: number) => {
    model.value.splice(index, 1)    // delete 1 row.
}

const createRow = () => {
    model.value.push(KeyValuePair.Empty());
}

</script>

<template>
    <ElTable :data="modelValue" :show-header="showHeader">
        <ElTableColumn label="#" width="40">
            <template #default="rowScope: { $index: number }">
                <span>{{ rowScope.$index + 1 }}</span>
            </template>
        </ElTableColumn>
        <ElTableColumn label="Key">
            <template #default="rowScope: { row: KeyValuePair }">
                <ElInput v-model="rowScope.row.key"></ElInput>
            </template>
        </ElTableColumn>
        <ElTableColumn label="Value">
            <template #default="rowScope: { row: KeyValuePair }">
                <ElInput v-model="rowScope.row.value"></ElInput>
            </template>
        </ElTableColumn>
        <ElTableColumn label="" width="70">
            <template #default="rowScope: { row: KeyValuePair, $index: number }">
                <ElButton type="danger" @click="deleteRow(rowScope.$index)" :icon="Delete"></ElButton>
            </template>
        </ElTableColumn>
        <template #append>
            <ElButton style="width: 100%;" @click="createRow">
                <el-icon>
                    <Plus />
                </el-icon>
                新增
            </ElButton>
        </template>
</ElTable></template>